<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-card :bordered="false">
      <h3 style="margin-bottom: 20px;">{{ id == 'null' || !id ? '新增' : '编辑' }}抽奖活动</h3>
      <a-steps :current="0" size="small" style="width: 800px;margin: 20px 0 30px;">
        <a-step title="基础信息" />
        <a-step title="抽奖设置" />
        <a-step title="分享信息" />
      </a-steps>
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 4 }, sm: { span: 6 } }" :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
        <a-form-model-item label="活动名称" prop="name">
          <a-input v-model.trim="form.name" :maxLength="16" placeholder="最多输入16字" allowClear />
        </a-form-model-item>
        <a-form-model-item label="归属微商城" prop="appId">
          <a-select v-model="form.appId" mode="multiple" placeholder="请选择" show-search :filter-option="filterOption" allowClear>
            <a-select-option :value="item.appid" v-for="item in brandList" :key="item.weid"> {{ item.name }}微商城 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="活动时间" prop="time">
          <a-range-picker
            style="width:100%;"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            v-model="form.time"
          />
        </a-form-model-item>
        <a-form-model-item label="参活人群" prop="isTakePartIn">
          <a-radio-group v-model="form.isTakePartIn">
            <a-radio :value="0">不限</a-radio>
            <a-radio :value="1">指定人群</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="参活人群" prop="crowd"  v-if="form.isTakePartIn == 1" class="hidden-title">
          <div style="background: #fafafa;padding-left: 10px;">
            <a-checkbox-group v-model="form.crowd" style="width: 90%;">
              <a-form-model-item style="margin-bottom: 0;">
                <a-checkbox :value="1">集团卡等级</a-checkbox>
                <a-form-model-item v-if="form.crowd.includes(1)" prop="groupLevel">
                  <a-checkbox-group v-model="form.groupLevel" @change="validate">
                    <a-checkbox value="0">集团银卡</a-checkbox>
                    <a-checkbox value="1">集团金卡</a-checkbox>
                    <a-checkbox value="2">集团白金卡</a-checkbox>
                    <a-checkbox value="3">集团铂金卡</a-checkbox>
                  </a-checkbox-group>
                </a-form-model-item>
              </a-form-model-item>
              <a-form-model-item style="margin-bottom: 0;">
                <a-checkbox :value="2">指定门店会员</a-checkbox>
                <a-form-model-item v-if="form.crowd.includes(2)" >
                  <a-upload
                    accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    name="file"
                    :showUploadList="false"
                    :multiple="false"
                    :data="uploadData"
                    :action="uploadUrl"
                    @change="handleChange"
                  >
                    <a-button type="primary" style="margin-left: 15px;">导入门店</a-button>
                  </a-upload>
                  <a-button style="margin-left: 15px;" @click="handleExportRelStore">下载模板</a-button>
                  多次导入门店，以最后一次导入数据为准
                  <a-table style="margin-top: 10px;" :pagination="pagination" bordered :columns="memberColumns" :data-source="luckyDrawStoreList"
                :rowKey="(record, index) => index" size="middle" @change="handleDrawStoreChange">
                    <span slot="action" slot-scope="text, record, index">
                      <a-popconfirm title="请确认是否删除？" @confirm="handleDeletStore(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </span>
                  </a-table>
                </a-form-model-item>
              </a-form-model-item>
              <a-form-model-item style="margin-bottom: 0;">
                <a-checkbox :value="3">人群包</a-checkbox>
                <a-form-model-item v-if="form.crowd.includes(3)" prop="peoplePackageInitsList">
                  <a-select mode="multiple"  v-model="form.peoplePackageInitsList" allowClear placeholder="请选择" show-search :filter-option="filterOption" @change="validate">
                    <a-select-option :value="item.id" v-for="item in peoplePackageList" :key="item.id"> {{ item.groupName }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-form-model-item>
              <a-form-model-item>
                <a-checkbox :value="4">条件人群</a-checkbox>
                <a-form-model-item :labelCol="{ span: 5 }" labelAlign="left" class="show-title" label="会员开卡时间早于" v-if="form.crowd.includes(4)" prop="cardTime">
                  <a-date-picker v-model="form.cardTime" @change="validate" />
                </a-form-model-item>
              </a-form-model-item>
            </a-checkbox-group>
            <div style="margin-top: -10px;">注：多选人群条件，取交集人群生效</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="抽奖次数获取规则" prop="rule">
          <a-checkbox-group v-model="form.rule" style="width: 100%;">
            <a-form-model-item style="margin-bottom: 0;">
              <a-checkbox :value="3">赠送抽奖机会</a-checkbox>
              <div v-if="form.rule.includes(3)" style="background: #fafafa;min-height: 70px;padding: 10px 0 0 10px;">
                <a-form-model-item  prop="giveNum">
                  <span style="color:#f5222d;">* </span>活动期间首次进入抽奖页面赠送 <a-input-number :min="0" v-model.trim="form.giveNum" style="width: 100px;" @blur="validate"  /> 次抽奖机会
                </a-form-model-item>
              </div>
            </a-form-model-item>
            <a-form-model-item style="margin-bottom: 0;">
              <a-checkbox :value="1">积分兑换抽奖机会</a-checkbox>
              <div v-if="form.rule.includes(1)" style="background: #fafafa;padding: 10px 0 0 10px;">
                <a-form-model-item  prop="consumeIntegral">
                  <span style="color:#f5222d;">* </span>活动期间消耗 <a-input-number :min="0" v-model.trim="form.consumeIntegral" style="width: 100px;" @blur="validate"  /> 积分兑换1次抽奖机会
                </a-form-model-item>
                <a-form-model-item prop="limitDayCount">
                  <span style="color:#f5222d;">* </span>每日可兑换 <a-input-number :min="0" v-model.trim="form.limitDayCount" style="width: 100px;" @blur="validate"   /> 次
                </a-form-model-item>
                <a-form-model-item required>
                  <span style="color:#f5222d;">* </span>配图
                  <span style="display: inline-block;vertical-align: top; width: 250px;">
                    <JImageUpload
                    :uploadParams="getUploadParams()"
                    :isMove="false"
                    :isMultiple="true"
                    :fileSize="10"
                    :number="1"
                    :accept="'image/*'"
                    @fileChange="fileIntegralImgeUrlChange"
                    v-model="integralImgeUrlList"
                  ></JImageUpload>
                  </span>
                  <div>90x90px或者等比例图片，支持jpg、PNG、GIF格式，图片大小建议小于500k</div>
                </a-form-model-item>
              </div>
            </a-form-model-item>
            <a-form-model-item style="margin-bottom: 0;">
              <a-checkbox :value="2">消费赠送抽奖次数</a-checkbox>
              <div v-if="form.rule.includes(2)" style="background: #fafafa;padding: 10px 0 0 10px;">
                <a-form-model-item prop="isStoreGroup">
                  <span style="color:#f5222d;">* </span>消费店仓范围
                  <a-radio-group v-model="form.isStoreGroup" @change="validate">
                    <a-radio :value="0">不限店仓</a-radio>
                    <a-radio :value="1">指定门店</a-radio>
                  </a-radio-group>
                  <a-form-model-item prop="storeGroupCode" v-if="form.isStoreGroup" style="margin: 0 10px 0 87px;padding-left: 10px;">
                    <a-select v-model="form.storeGroupCode" style="width: 200px;" @change="validate" show-search :filter-option="filterOption">
                      <a-select-option :value="item.id+''" v-for="item in storePackageList" :title="item.storePackageName" :key="item.id">{{ item.storePackageName }}</a-select-option>
                    </a-select>
                    <a style="margin: 0 10px;" @click="handleRefreshStorePackageList">刷新</a>
                    <a @click="handleToStorePackage">门店包管理</a>
                  </a-form-model-item>
                </a-form-model-item>
                <a-form-model-item  prop="consumeMoney">
                  <span style="color:#f5222d;">* </span>活动期间单笔订单实付满 <a-input v-model.trim="form.consumeMoney" style="width: 100px;" @blur="validate" /> 元，赠送1次抽奖机会
                </a-form-model-item>
                <a-form-model-item prop="consumeLimitDayCount">
                  <span style="color:#f5222d;">* </span>每日赠送抽奖次数上限 <a-input-number :min="0" v-model.trim="form.consumeLimitDayCount" style="width: 100px;" @blur="validate"  /> 次
                </a-form-model-item>
                <a-form-model-item prop="orderType">
                  <span style="color:#f5222d;">* </span>订单类型
                  <a-radio-group v-model="form.orderType" @change="validate">
                    <a-radio :value="0">全渠道订单</a-radio>
                    <a-radio :value="1">指定渠道订单</a-radio>
                  </a-radio-group>
                  <a-form-model-item prop="useChannel" v-if="form.orderType" style="margin: 0 10px 0 70px;background: #fff;padding-left: 10px;">
                    <a-checkbox-group v-model="form.useChannel" @change="validate">
                      <a-checkbox value="0">微商城订单</a-checkbox>
                      <!-- <a-checkbox value="1">POS+订单</a-checkbox> -->
                      <a-checkbox value="1">线下</a-checkbox>
                      <a-checkbox value="2">BOX</a-checkbox>
                    </a-checkbox-group>
                  </a-form-model-item>
                </a-form-model-item>
                <a-form-model-item required>
                  <span style="color:#f5222d;">* </span>配图
                  <span style="display: inline-block;vertical-align: top; width: 250px;">
                    <JImageUpload
                    :uploadParams="getUploadParams()"
                    :isMove="false"
                    :isMultiple="true"
                    :fileSize="10"
                    :number="1"
                    :accept="'image/*'"
                     @fileChange="fileConsumeImgeUrlChange"
                    v-model="consumeImgeUrlList"
                  ></JImageUpload>
                  </span>
                  <div>90x90px或者等比例图片，支持jpg、PNG、GIF格式，图片大小建议小于500k</div>
                </a-form-model-item>
              </div>
            </a-form-model-item>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item label="每日抽奖次数上限" prop="dayLimitUp">
          <a-input-number v-model.trim="form.dayLimitUp" :min="0" style="width: 300px;"  /> 次
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button style="margin-right: 10px;" @click="handleBack">上一步</a-button>
          <a-button @click="handleSubmit" type="primary">下一步</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </a-spin>
</template>
<script>
import { saveOrUpdateBaseInfo, getPeoplePackageList, exportRelStore, importStore, getLuckyDrawInfoById, getAppShopVoList, getStorePackageList } from '@/api/marketingCenter/luckyDraw'
import JImageUpload from '../../components/JImageUpload.vue'
import moment from 'moment'
const memberColumns = [
    {
      title: '店仓编号',
      width: '1',
      align: 'center',
      dataIndex: 'storeCode'
    },
    {
      title: '店仓名称',
      width: '2',
      align: 'center',
      dataIndex: 'storeName'
    },
    {
      title: '操作',
      width: '1',
      align: 'center',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const ruleInteger = [
    { required: true, message: '请输入', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const reg = /^[0-9]*[1-9][0-9]*$/
        if (!value) {
          callback()
        } else {
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的格式'))
          }
        }
      },
      trigger: 'blur'
    }
  ]
export default {
  components: {
    JImageUpload
  },
  data() {
    return {
      storePackageList: [],
      peoplePackageList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      pageId: null,
      memberColumns,
      luckyDrawStoreList: [
      ],
      uploadData: {
      },
      uploadUrl: importStore,
      id: this.$route.params.id || null,
      brandList: [],
      integralImgeUrlList: [],
      consumeImgeUrlList: [],
      spinning: false,
      form: {
        cardTime: moment(new Date()).format('YYYY-MM-DD'),
        appId: [],
        orderType: 0,
        groupLevel: [],
        crowd: [],
        luckyDrawIntegralList: [],
        luckyDrawConsumeList: [],
        peoplePackageInitsList: [],
        rule: [],
        consumeIntegral: '',
        isTakePartIn: 0,
        consumeMoney: '',
        integralImgeUrl: '',
        consumeImgeUrl: '',
        giveNum: '',
        isStoreGroup: 0,
        storeGroupCode: '',
        storeGroupName: ''
      },
      rules: {
        isStoreGroup: [{ required: true, message: '请选择', trigger: 'change' }],
        storeGroupCode: [{ required: true, message: '请选择', trigger: 'change' }],
        cardTime: [{ required: true, message: '请选择', trigger: 'change' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        appId: [{ required: true, message: '请选择', trigger: 'change' }],
        integralImgeUrl: [{ required: true, message: '请选择', trigger: 'change' }],
        consumeImgeUrl: [{ required: true, message: '请选择', trigger: 'change' }],
        peoplePackageInitsList: [{ required: true, message: '请选择', trigger: 'change' }],
        groupLevel: [{ required: true, message: '请选择', trigger: 'change' }],
        limitDayCount: ruleInteger,
        useChannel: [{ required: true, message: '请选择', trigger: 'change' }],
        orderType: [{ required: true, message: '请选择', trigger: 'change' }],
        crowd: [{ required: true, message: '请选择', trigger: 'change' }],
        consumeIntegral: ruleInteger,
        giveNum: ruleInteger,
        rule: [{ required: true, message: '请选择', trigger: 'change' }],
        isTakePartIn: [{ required: true, message: '请选择', trigger: 'change' }],
        time: [{ required: true, message: '请选择', trigger: 'change' }],
        dayLimitUp: ruleInteger,
        consumeLimitDayCount: ruleInteger,
        consumeMoney: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              const reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
              if (!value && value !== 0) {
                callback()
              } else {
                if (reg.test(value)) {
                  callback()
                } else {
                  return callback(new Error('请输入正确的金额'))
                }
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
  },
  activated() {
  },
  created() {
    this.getPeoplePackageList()
    this.getDetails()
    this.getBrandList()
    this.getStorePackageList()
  },
  computed: {},
  mounted() {},
  methods: {
    // 跳转门店包管理
    handleToStorePackage(){
      const a = this.$router.resolve({path: '/marketingCenter/otherTools/storePackage/list'})
      window.open(a.href,'_blank')
    },
    
    // 获取微商城
    getBrandList() {
      getAppShopVoList().then(res => {
          if (res.code === 200) {
            this.brandList = res.data
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
    },

    // 获取门店包列表
    getStorePackageList() {
      getStorePackageList().then(res => {
          if (res.code === 200) {
            this.storePackageList = res.data
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
    },

    // 刷新门店包列表
    handleRefreshStorePackageList() {
      getStorePackageList().then(res => {
          if (res.code === 200) {
            this.storePackageList = res.data
            this.$message.success('门店包刷新成功')
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
    },

    

    // 下载模板
    handleExportRelStore() {
      window.location.href = exportRelStore
    },
    
    // 获取人群包列表
    getPeoplePackageList() {
      getPeoplePackageList().then(res => {
        if (res.code === 200) {
          this.peoplePackageList = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 导入指定门店
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        const {msg, message, code, data} = info.file.response
        if (code == 200 ) {
          this.luckyDrawStoreList = data
        } else {
          this.$message.error(msg || message)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    handleDrawStoreChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      // this.getluckyDrawStoreList()
    },

    // 删除指定门店
    handleDeletStore(id){
      const index = this.luckyDrawStoreList.findIndex((e) => e.id == id);
      this.luckyDrawStoreList.splice(index, 1)
    },

    // 获取详情
    getDetails() {
      if (this.id == 'null' || !this.id || this.id==-1) return
      const data = {
        luckyId: this.id
      }
      getLuckyDrawInfoById(data)
      .then(res => {
        if (res.code === 200) {
          const { groupLevel, startTime, endTime, isLevel, 
            isStore, isPeoples, isIntegral, isConsume, 
            luckyDrawIntegralList, luckyDrawConsumeList, 
            peoplePackageInitsList, luckyDrawStoreList, pageId, appId, isCrowd, cardTime, isGiveNum } = res.data
            console.log(res.data, 'res.data')
          let crowd = []
          let rule = []
          this.pageId = pageId ? pageId : null
          if (isLevel == 1) {
            crowd.push(1)
          }
          if (isStore == 1) {
            crowd.push(2)
          }
          if (isPeoples == 1) {
            crowd.push(3)
          }
          if (isCrowd == 1) {
            crowd.push(4)
          }
          if (isIntegral == 1) {
            rule.push(1)
          }
          if (isConsume == 1) {
            rule.push(2)
          }
          if (isGiveNum == 1) {
            rule.push(3)
          }
          const currentLuckyDrawIntegralObj = luckyDrawIntegralList.length ? luckyDrawIntegralList[0] : {}
          const currentLuckyDrawConsumeObj = luckyDrawConsumeList.length ? luckyDrawConsumeList[0] : {isStoreGroup: 0}
          this.form = {
            ...res.data,
            groupLevel: groupLevel ? groupLevel.split(',') : [],
            time: [startTime, endTime],
            cardTime: cardTime ? moment(cardTime).format('YYYY-MM-DD') : moment(new Date()).format('YYYY-MM-DD'),
            crowd,
            rule,
            appId: appId ? appId.split(',') : [],
            ...currentLuckyDrawConsumeObj,
            ...currentLuckyDrawIntegralObj,
            consumeLimitDayCount: currentLuckyDrawConsumeObj.limitDayCount ? currentLuckyDrawConsumeObj.limitDayCount : '',
            peoplePackageInitsList: peoplePackageInitsList.length ? peoplePackageInitsList.map(e => e.id) : [],
            useChannel: currentLuckyDrawConsumeObj.useChannel ? currentLuckyDrawConsumeObj.useChannel.split(',') : []
          }
          console.log(this.form, 'form')
          this.luckyDrawStoreList = luckyDrawStoreList
          this.integralImgeUrlList = currentLuckyDrawIntegralObj.imgeUrl ? currentLuckyDrawIntegralObj.imgeUrl.split(',') : []
          this.consumeImgeUrlList = currentLuckyDrawConsumeObj.imgeUrl ? currentLuckyDrawConsumeObj.imgeUrl.split(',') : []
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
      .catch(err => {})
    },

    getUploadParams() {
      return {
        actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
        headers: {
          authorization: 'authorization-text'
        },
        uploadHost: 'https://img.bzhz.jnbygroup.com/'
      }
    },

    // 图片change
    fileIntegralImgeUrlChange(list) {
      this.form.integralImgeUrl = list.length ? list[0].url : ''
    },

    // 图片change
    fileConsumeImgeUrlChange(list) {
      this.form.consumeImgeUrl = list.length ? list[0].url : ''
    },
    
    // 确认
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          const { groupLevel, isTakePartIn, integralImgeUrl, consumeImgeUrl, rule, appId, time, crowd,
           peoplePackageInitsList, consumeIntegral, limitDayCount, consumeMoney,
            consumeLimitDayCount, useChannel, orderType, luckyDrawIntegralList, luckyDrawConsumeList, cardTime, storeGroupCode, isStoreGroup, giveNum } = this.form
            
          if (!this.luckyDrawStoreList.length && crowd.includes(2) && isTakePartIn == 1) {
            this.$message.error('请上传指定门店会员！')
            return
          }
          if (!integralImgeUrl && rule.includes(1)) {
            this.$message.error('请上传配图！')
            return
          }
          if (!consumeImgeUrl && rule.includes(2)) {
            this.$message.error('请上传配图！')
            return
          }
          let peoplePackageInitsObjectList = []
          this.peoplePackageList.forEach(e => {
            if (peoplePackageInitsList.includes(e.id)) {
              peoplePackageInitsObjectList.push(e)
            }
          })
          const currentLuckyDrawIntegralObj = luckyDrawIntegralList.length ? luckyDrawIntegralList[0] : {}
          const currentLuckyDrawConsumeObj = luckyDrawConsumeList.length ? luckyDrawConsumeList[0] : {}
          const oldStorePackageName = luckyDrawConsumeList.length ? luckyDrawConsumeList[0].storeGroupName : null
          const storePackageName = this.storePackageList.filter(e => e.id == storeGroupCode).length ? this.storePackageList.filter(e => e.id == storeGroupCode)[0].storePackageName : oldStorePackageName
          const data = {
            ...this.form,
            startTime: time[0],
            endTime: time[1],
            cardTime: moment(cardTime).format('YYYY-MM-DD') + ' 00:00:00',
            appId: appId.join(','),
            groupLevel: groupLevel.length ? groupLevel.join(',') : null,
            isLevel: isTakePartIn == 1 && crowd.includes(1) ? 1 : 0,
            isStore: isTakePartIn == 1 && crowd.includes(2) ? 1 : 0,
            isPeoples: isTakePartIn == 1 && crowd.includes(3) ? 1 : 0,
            isCrowd: isTakePartIn == 1 && crowd.includes(4) ? 1 : 0,
            peoplePackageInitsList: peoplePackageInitsObjectList,
            isIntegral: rule.includes(1) ? 1 : 0,
            isConsume: rule.includes(2) ? 1 : 0,
            isGiveNum: rule.includes(3) ? 1 : 0,
            giveNum: rule.includes(3) ? giveNum : null,
            luckyDrawStoreList: this.luckyDrawStoreList,
            luckyDrawIntegralList: [
              {
                ...currentLuckyDrawIntegralObj,
                consumeIntegral: consumeIntegral ? consumeIntegral : null,
                limitDayCount: limitDayCount ? limitDayCount: null,
                imgeUrl: integralImgeUrl ? integralImgeUrl : null
              }
            ],
            luckyDrawConsumeList: [
              {
                ...currentLuckyDrawConsumeObj,
                consumeMoney: consumeMoney ? consumeMoney : null,
                imgeUrl: consumeImgeUrl ? consumeImgeUrl : null,
                limitDayCount: consumeLimitDayCount ? consumeLimitDayCount : null,
                orderType,
                useChannel: orderType == 1 ? useChannel.join(',') : null,
                storeGroupCode: isStoreGroup ? storeGroupCode : null,
                storeGroupName: isStoreGroup ? storePackageName : null,
                isStoreGroup
              }
            ],
            id: this.id == 'null' ? null : this.id
          }
          this.spinning = true
          saveOrUpdateBaseInfo(data).then(res => {
            if (res.code === 200) {
              this.spinning = false
              if (this.id == 'null' || this.id == -1) {
                this.$router.replace(`/marketingCenter/memberPromotions/luckyDraw/addOrEditBasic/${res.data}`)
              }
              if (this.pageId && this.pageId != -1) {
                this.$router.push(`/marketingCenter/memberPromotions/luckyDraw/addOrEditSetUp/${res.data}?pageId=${this.pageId}`)
              } else {
                this.$router.push(`/marketingCenter/memberPromotions/luckyDraw/addOrEditSetUp/${res.data}`)
              }
              
            } else {
              this.spinning = false
              this.$message.error(res.msg || res.message)
            }
          }).catch(err => {
            this.spinning = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    //返回
    handleBack() {
      this.$router.go(-1)
    },

    validate() {
      this.$refs.rulesForm.validate()
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>
<style lang="less" scoped>
.limit-text {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 10px;
  text-align: right;
}
/deep/.ant-checkbox-wrapper {
  margin-left: 0;
  margin-right: 8px;
}
.ant-spin-nested-loading /deep/ .ant-spin {
  top: 50%;
  transform: translateY(-50%);
}
/deep/.ant-tag {
  cursor: pointer;
}
.title {
  font-size: 15px;
  span {
    color: #999;
    font-size: 14px;
    font-weight: normal;
  }
}
.product {
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.product {
  display: flex;
  overflow: hidden;
  .img {
    margin: 0;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
.share-img /deep/ .ant-upload-list-picture-card .ant-upload-list-item {
  height: 80px;
}
.share-img /deep/ .ant-upload.ant-upload-select-picture-card {
  height: 80px;
}
.share-img /deep/ .ant-upload-list-picture-card-container {
  height: 80px;
}
.prize-img /deep/ .ant-upload-list-picture-card .ant-upload-list-item {
  margin: 0 auto;
  width: 90px;
  height: 90px;
}
.prize-img /deep/ .ant-upload.ant-upload-select-picture-card {
  margin: 0 auto;
  float: none;
  width: 90px;
  height: 90px;
}
.prize-img /deep/ .my-img-item {
  margin: 0 auto;
  width: 90px;
  height: 90px;
}
.prize-img /deep/ .my-img-list-wrapper {
  margin: 0 auto;
  width: 90px;
}
/deep/ .my-img-item {
  margin: 0 8px 8px 0;
}
.hidden-title /deep/ .ant-form-item-label label {
    visibility: hidden;
}
.show-title /deep/ .ant-form-item-label label {
    visibility: visible;
}
</style>
